import React, { useEffect } from 'react'
import { Helmet } from 'react-helmet'
import { useSelector, useDispatch } from 'react-redux';
import { fetchItems } from '../../store/actions';

function List() {

  const items = useSelector(state => state.items);
  const dispatch = useDispatch();

  useEffect(() => {
    if (items.length === 0) {
      dispatch(fetchItems());
    }
  }, []);

  return (
    <>
      <Helmet>
        <title>List Page Title</title>
      </Helmet>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  )
}

export default List
